<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <title>產品詳情頁</title>
</head>

<body class="minipage">
    <div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <div class="object" id="object_one"></div>
                <div class="object" id="object_two"></div>
                <div class="object" id="object_three"></div>
                <div class="object" id="object_four"></div>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="logocon">
            <div class="logoimg "><img src="./img/logo.png " height="50px "></div>
            <div class="cont ">
                <p>O2O客戶服務平台（EC2）</p>
                <p>請關注粉絲專頁 <a href="javascript ">福皓整合科技</a></p>
            </div>
            <!-- <div class="sharecon ">
                    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FFull2house%2F&amp;width=50&amp;layout=box_count&amp;action=like&amp;size=large&amp;show_faces=false&amp;share=false&amp;height=65&amp;appId=382298112140973 " width="50 " height="65 " style="border:none;overflow:hidden " scrolling="no " frameborder="0 " allowtransparency="true "></iframe>
                </div> -->
        </div>
        <section class="img-container">
        </section>
        <section class="content">
            <h2 class="title">純真年代蛋糕純真年代蛋糕純真年代蛋糕純真年代蛋糕純真年代蛋糕純</h2>
            <p class=price-con><em>NT$</em><span class="price">268.00</span><span class="oprice">NT$399.00</span></p>
            <p class="intro">【保存期限】：宅配到貨三天
                <br />【保存方法】：冷藏
                <br /> *產品無添加請盡快食用
            </p>
            <ul class="infor spec">
                <li class="clearfix">
                    <p class="tit fl">商品尺寸：</p>
                    <p class="cont fr txt_align_r"><select class="size"><option>18</option><option>19</option><option>20</option></select></p>
                </li>
                <li class="clearfix">
                     <p class="tit fl">商品顏色：</p>
                      <p class="cont fr txt_align_r"><select class="size"><option>紅色</option><option>綠色</option><option>黑色</option></select></p>
                </li>

            </ul>
            <div class="numcon clearfix">
                <span class="fl tit">數量：</span>
                <div class="fr clearfix">
                    <div class="cont">

                        <a id="plus" class="btn plus"><i class="icon iconfont icon-jian"></i></a>
                        <div class="numberInput">
                            <input class="" id="number" type="number" value="1">
                        </div>

                        <a id="reduce" class="btn reduce"><i class="icon iconfont icon-tianjia"></i></a>
                        <!-- <button type="button" id="btnSearch" class="btn btnSearch"><i class="fa fa-search" aria-hidden="true"></i></button> -->

                    </div>
                </div>
                <!-- <span class="fr"><input type="number" min="0" class="number" value="1"></span> -->
            </div>
        </section>
        <div class="nav-con">
            <div class="nav clearfix">
             <a href="" class="navbtntxt"><i class="icon iconfont icon-gouwu"></i><font>繼續購物</font></a>
             <a href="" class="navbtntxt"><i class="icon iconfont icon-dingdan2"></i><font>我的订单</font></a>
             <!-- <a href="" class="navbtntxt"><i class="icon iconfont icon-gouwuche"></i><font>購物車</font></a>   -->
             <a id="buycar" href="" class="btn-red fr navbtn">立即購買</a>
             <a id="buy" href="" class="btn-green fr navbtn">加入購物車</a>
            </div>
           
        </div>
    </div>
    <script src="./js/base.js"></script>
    <script src="./js/touchwipe.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var baseUrl = './img/';
            var slideimgs = [baseUrl + 'slides_1.jpg', baseUrl + 'slides_2.jpg', baseUrl + 'slides_3.jpg'];
            mybase.preloadimages(slideimgs).done(function(images) {
                $('#loading').hide();
                mybase.myScroll({
                    autoplay: true, //是否自动播放
                    el: '.img-container',
                    imgList: slideimgs
                });
            })
            var num = '';
            $(document).on('click', '#plus', function(e) {
                num = $('#number').val();
                if (num == 1) {
                    return false;
                }

                num--;
                $('#number').val(num);
            });
            $(document).on('click', '#reduce', function(e) {

                num = $('#number').val();
                num++;
                $('#number').val(num);
            });
            $(document).on('blur', '#number', function(e) {
                num = $('#number').val();
                if (num == '') {
                    $('#number').val('1');
                }
            });
        })
    </script>
</body>

</html>